<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<html>

<head>
	<meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
	<title>公开课列表 - 慕学在线网</title>
	<link rel="stylesheet" type="text/css" href="../../css/reset.css">
	<link rel="stylesheet" type="text/css" href="../../css/animate.css">
	<link rel="stylesheet" type="text/css" href="../../css/style.css">
    
    <script src="../../js/jquery.min.js" type="text/javascript"></script>
    <script src="../../js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
	<script type="text/javascript">
        function add_fav(fav_id, fav_type){
            if($("#savesession").val()==""){
                var r = confirm("您还未登录，单击确定登录")
                if (r==true){
                    window.location.href="/login"
                }
            }
            $.ajax({
                type: "POST",
                url:"/org/add_fav",
                dataType:"json",
                data:JSON.stringify({'fav_id':fav_id, 'fav_type':fav_type}),
                contentType:"application/json;charset=utf-8",
                success: function(data) {
                    if(data.sta=="ok"){
                        $("#jsRightBtn").html("已收藏")
                    }
                    if (data.sta=="no"){
                        $("#jsRightBtn").html("收藏")
                    }
                },
            });
        }
        function add_fav_course(fav_id, fav_type){
            if($("#savesession").val()==""){
                var r = confirm("您还未登录，单击确定登录")
                if (r==true){
                    window.location.href="/login"
                }
            }
            $.ajax({
                type: "POST",
                url:"/org/add_fav",
                dataType:"json",
                data:JSON.stringify({'fav_id':fav_id, 'fav_type':fav_type}),
                contentType:"application/json;charset=utf-8",
                success: function(data) {
                    if(data.sta=="ok"){
                        $('#jsLeftBtn').html("已收藏")
                    }
                    if (data.sta=="no"){
                        $('#jsLeftBtn').html("收藏")
                    }
                },
            });
        }
        function startstudy(course_id,user_id) {
            if (user_id == null || user_id == "") {
                var r = confirm("您还未登录，单击确定登录")
                if (r == true) {
                    window.location.href = "/login"
                }
            } else {
                $.ajax({
                    url: "/startstudy",
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify({'course_id': course_id, 'user_id': user_id}),
                    success: function (data) {
                        if (data.sta == "ok") {
                            alert("记录成功");
							window.location.href="/course-video?id="+course_id;
                        }
                    }
                });
            }
        }
	</script>
	<script type="text/javascript">
        function checkisfav() {
            if ($("#isSave").val()=="yes"){
                $("#jsRightBtn").html("已收藏")
            }else{
                if($("#isSave").val()=="no"){
                    $("#jsRightBtn").html("收藏")
                }
            }
            if ($("#isSave2").val()=="yes"){
                $("#jsLeftBtn").html("已收藏")
			}else{
                $("#jsLeftBtn").html("收藏")
			}
        }
	</script>
	<script src="../../js/jquery.min.js" type="text/javascript"></script>
	<script src="../../../js/message.js" type="text/javascript"></script>
	<script src="../../js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
	<script type="text/javascript">
        var ctx = "${sessionScope.user_session}";
	</script>
</head>
<body onload="checkisfav(),setTimeout('getcount()',1000)">
<section class="headerwrap ">
    <header>
		<div  class=" header">
 			<div class="top">
				<div class="wp">
					<div class="fl"><p>服务电话：<b>13280797579</b></p></div>
					<!--登录后跳转-->
					<c:choose>
						<c:when test="${sessionScope.user_session!=null}">
							<div class="personal">
								<dl class="user fr">
									<dd>${sessionScope.user_session.username}<img class="down fr" src="${pageContext.request.contextPath}/images/top_down.png"/></dd>
									<dt><img width="20" height="20" src="${pageContext.request.contextPath}${sessionScope.user_session.image}"/></dt>
								</dl>
								<div class="userdetail">
									<dl>
										<dt><img width="80" height="80" src="${pageContext.request.contextPath}${sessionScope.user_session.image}"/></dt>
										<dd>
											<h2>${sessionScope.user_session.username}</h2>
											<p>用户</p>
										</dd>
									</dl>
									<div class="btn">
										<a class="personcenter fl" href="${pageContext.request.contextPath}/usercenter">进入个人中心</a>
										<a class="fr" href="${pageContext.request.contextPath}/logout">退出</a>
									</div>
								</div>
								<a href="/message">
									<div class="msg-num"><span id="MsgNum"></span></div>
								</a>
							</div>
						</c:when>
						<c:otherwise>
							<a style="color:white" class="fr registerbtn" href="/register">注册</a>
							<a style="color:white" class="fr loginbtn" href="${pageContext.request.contextPath}/login">登录</a>
						</c:otherwise>
					</c:choose>


				</div>
			</div>

            <div class="middle">
                <div class="wp">
                    <a href="/index"><img class="fl" src="../../images/logo.jpg"/></a>
                    <div class="searchbox fr">
                        <div class="selectContainer fl">
                            <span class="selectOption" id="jsSelectOption" data-value="course">
                                公开课
                            </span>
                            <ul class="selectMenu" id="jsSelectMenu">
                                <li data-value="course">公开课</li>
                                <li data-value="org">课程机构</li>
                                <li data-value="teacher">授课老师</li>
                            </ul>
                        </div>
                        <input id="search_keywords" class="fl" type="text" value="" placeholder="请输入搜索内容"/>
                        <img class="search_btn fr" id="jsSearchBtn" src="../../images/search_btn.png"/>
						<input type="hidden" id="savesession" value="${sessionScope.user_session}">
						<input type="hidden" id="isSave" value="${requestScope.favflag}">
						<input type="hidden" id="isSave2" value="${requestScope.favflag1}">
                    </div>
                </div>
            </div>
            
            
			<nav>
				<div class="nav">
					<div class="wp">
						<ul>
							<li ><a href="/index">首页</a></li>
							<li class="active">
								<a href="/course-list">
									公开课<img class="hot" src="../../images/nav_hot.png">
								</a>
							</li>
							<li >
								<a href="/showTeacherList">授课教师</a>
							</li>
							<li ><a href="/org_list">授课机构</a></li>
						</ul>
					</div>
				</div>
			</nav>
            
			</div>
    </header>
</section>
<!--crumbs start-->

    <section>
	<div class="wp">
		<div class="crumbs">
			<ul>
				<li><a href="/index">首页</a>></li>
                <li><a href="/course-list">公开课程</a>></li>
				<li>课程详情</li>
			</ul>
		</div>
	</div>
</section>


    <section>
	<div class="wp">
		<div class="groupPurchase_detail detail">
			<div class="toppro">
				<div class="left">
					<div class="picbox">
						<div class="tb-booth tb-pic">
							<img width="440" height="445" src="${course.image}" class="jqzoom" />
						</div>

					</div>
					<div class="des">
						<h1 title="${course.name}">${course.name}</h1>
						<span class="key">${course.detail}</span>
						<div class="prize">
							<span class="fl">难度：<i class="key">${course.degree}</i></span>
							<span class="fr">学习人数：${course.students}</span>
						</div>
						<ul class="parameter">
							<li><span class="pram word3">时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;长：</span><span>${course.learn_time}</span></li>
                            <li><span class="pram word3">章&nbsp;节&nbsp;数：</span><span>xxx</span></li>
                            <li><span class="pram word3">课程类别：</span><span title="">${course.descr}</span></li>
							<li class="piclist"><span class="pram word4">学习用户：</span>
                                <c:forEach items="${students}" var="student" begin="0" end="8">
									<span class="pic"><img width="40" title="${student.nike_name}" height="40" src="${student.image}"/>...</span>
								</c:forEach>

                                
							</li>
						</ul>
						<div class="btns">
							<div class="btn colectgroupbtn"  id="jsLeftBtn" onclick="add_fav_course(${course.id},3)">
                                  收藏
                            </div>
                                <div class="buy btn"><a style="color: white" href="javascript:" onclick="startstudy(${course.id},${sessionScope.user_session.id})">开始学习</a></div>
						</div>
					</div>
                    <div class="group-share-box">
                        <div class="bdsharebuttonbox"
                             data-text="django开始了"
                             data-desc="我在#慕课网#发现了"
                             data-comment=""
                             data-url="/group/groupdetail/15/">
                            <span class="fl">分享到：</span>
                            <a href="#" class="bds_more" data-cmd="more"></a>
                            <a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone"></a>
                            <a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina"></a>
                            <a title="分享到腾讯微博" href="#" class="bds_tqq" data-cmd="tqq"></a>
                            <a title="分享到人人网" href="#" class="bds_renren" data-cmd="renren"></a>
                            <a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin"></a>
                        </div>
                    </div>
				</div>
				<div class="right">
					<div class="head">
						<h1>授课机构</h1>
						<p>世界名校，课程权威</p>
					</div>
					<div class="pic">
                        <a href="/org_home?id=${course.organization.id}">
                            <img width="150" height="80" src="${course.organization.image}"/>
                        </a>
                    </div>
					<a href="/org_home?id=${course.organization.id}">
                        <h2 class="center" title="清华大学">${course.organization.name}</h2>
                    </a>
					<div class="btn  notlogin
					     "data-favid="14" id="jsRightBtn" onclick="add_fav(${course.organization.id},1)">
                         已收藏
                    </div>
					<div class="clear">
						<ul>
                            <li>
                                <span>课 &nbsp;程&nbsp; 数：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   ${fn:length(course.organization.courses)}</span>
                            </li>
                            <li>
                                <span>教 &nbsp;师&nbsp; 数：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  ${fn:length(course.organization.teachers)}</span>
                            </li>
							<li>所在地区：&nbsp;&nbsp;${course.organization.address}</li>
							<li>认&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;证&nbsp;:
                                &nbsp;&nbsp;
								    <img title="金牌机构", src="../../images/gold.png"/>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
    <section>
	<div class="wp">
		<div class="list groupPurchase_detail_pro">
			<div class="left layout">
				<div class="head">
					<ul class="tab_header">
						<li class="active">课程详情</li>
					</ul>
				</div>
				<div class="tab_cont tab_cont1">
                    
					<p>&nbsp; &nbsp; django与vuejs实战项目</p><p><img src="../../media/courses/ueditor/aobama_20161113225044_773.png" title="" alt="aobama.png"/> </p><table><tbody><tr class="firstRow"><td style="word-break: break-all;" width="53" valign="top">课程</td><td style="word-break: break-all;" width="53" valign="top">课时<br/> </td><td style="word-break: break-all;" width="53" valign="top">难度<br/> </td><td style="word-break: break-all;" width="53" valign="top">时长<br/> </td><td style="word-break: break-all;" width="53" valign="top">学习人数<br/> </td><td style="word-break: break-all;" width="53" valign="top">点击数<br/> </td><td style="word-break: break-all;" width="53" valign="top">点击数</td><td style="word-break: break-all;" width="53" valign="top">点击数</td></tr><tr><td style="word-break: break-all;" width="53" valign="top">django开发<br/> </td><td style="word-break: break-all;" width="53" valign="top">20<br/> </td><td style="word-break: break-all;" width="53" valign="top">中级<br/> </td><td style="word-break: break-all;" width="53" valign="top">30<br/> </td><td style="word-break: break-all;" width="53" valign="top">100000<br/> </td><td style="word-break: break-all;" width="53" valign="top">100000<br/> </td><td style="word-break: break-all;" width="53" valign="top">100000<br/> </td><td style="word-break: break-all;" width="53" valign="top">100000<br/> </td></tr><tr><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td></tr><tr><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td></tr><tr><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td></tr><tr><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td></tr></tbody></table><p><br/> </p><p><img src="http://img.baidu.com/hi/jx2/j_0025.gif"/> </p><p><br/> </p><h1 class="ue_t" label="Title center" name="tc" style="border-bottom-color:#cccccc;border-bottom-width:2px;border-bottom-style:solid;padding:0px 4px 0px 0px;text-align:center;margin:0px 0px 20px;"><span style="color:#c0504d;">[键入文档标题]</span></h1><p style="text-align:center;"><strong class="ue_t">[键入文档副标题]</strong></p><h3><span class="ue_t" style="font-family:幼圆">[标题 1]</span></h3><p class="ue_t" style="text-indent:2em;">对于“插入”选项卡上的库，在设计时都充分考虑了其中的项与文档整体外观的协调性。 您可以使用这些库来插入表格、页眉、页脚、列表、封面以及其他文档构建基块。 您创建的图片、图表或关系图也将与当前的文档外观协调一致。</p><p class="ue_t" style="text-indent:2em;"><img src="http://127.0.0.1:8000../media/courses/ueditor/57aa86a0000145c512000460_20161210234050_865.jpg" title="" alt="57aa86a0000145c512000460.jpg"/> </p><h3><span class="ue_t" style="font-family:幼圆">[标题 2]</span></h3><p><img src="http://api.map.baidu.com/staticimage?center=116.410899,39.863624&zoom=11&width=530&height=340&markers=116.404,39.915" width="530" height="340"/> </p><p class="ue_t" style="text-indent:2em;">在“开始”选项卡上，通过从快速样式库中为所选文本选择一种外观，您可以方便地更改文档中所选文本的格式。 您还可以使用“开始”选项卡上的其他控件来直接设置文本格式。大多数控件都允许您选择是使用当前主题外观，还是使用某种直接指定的格式。</p><h3><span class="ue_t" style="font-family:幼圆">[标题 3]</span></h3><p>2016-12-10</p><p class="ue_t">对于“插入”选项卡上的库，在设计时都充分考虑了其中的项与文档整体外观的协调性。 您可以使用这些库来插入表格、页眉、页脚、列表、封面以及其他文档构建基块。 您创建的图片、图表或关系图也将与当前的文档外观协调一致。</p><p><br/> </p>
                    
				</div>
				<div class="tab_cont tab_cont2" >
					<div class="comment">
						<div class="comenlist">

	                    </div>
					</div>
				</div>
			</div>
			<div class="right layout">
				<div class="head">相关课程推荐</div>
                <div class="group_recommend">
                    
                        <dl>
                            <dt>
                                <a target="_blank" href="">
                                    <img width="240" height="220" class="scrollLoading" src="../../media/courses/2016/11/540e57300001d6d906000338-240-135_mvvGYHL.jpg"/>
                                </a>
                            </dt>
                            <dd>
                                <a target="_blank" href=""><h2> django实战项目</h2></a>
                                <span class="fl">学习时长：<i class="key">0</i></span>
                            </dd>
                        </dl>
                    


                </div>
			</div>
		</div>
	</div>
</section>

<footer>
		<div class="footer">
			<div class="wp">
				<ul class="cont">
					<li class="logo"><a href=""><img src="../../images/footlogo.png"/></a></li>
					<li class="code"><img src="../../images/code.jpg"/><p class="center">扫描关注微信</p></li>
					<li class="third"><img class="fl" src="../../images/tell.png"/><p class="tell">13280797579</p><p class="time">周一至周日 9:00-18:00</p></li>
				</ul>

			</div>
			<p class="line"></p>
			<div class="wp clear">
                <span class="fl">? 2016 www.projectsedu.com 慕学在线-在线学习交流平台 保留所有权利</span>
                <span class="fr">copyright ? 2016 ICP备案证书号：蜀ICP备xxxxx号-1</span>
			</div>
		</div>
	</footer>

<section>
    <ul class="sidebar">
        <li class="qq">
            <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2023525077&site=qq&menu=yes"></a>
        </li>
        <li class="totop"></li>
    </ul>
</section>
<script src="../../js/selectUi.js" type='text/javascript'></script>
<script src="../../js/deco-common.js" type='text/javascript'></script>
<script type="text/javascript" src="../../js/plugins/laydate/laydate.js"></script>
<script src="../../js/plugins/layer/layer.js"></script>
<script src="../../js/plugins/queryCity/js/public.js" type="text/javascript"></script>
<script src="../../js/unslider.js" type="text/javascript"></script>
<script src="../../js/plugins/jquery.scrollLoading.js"  type="text/javascript"></script>
<script src="../../js/deco-common.js"  type="text/javascript"></script>
<script src="../../js/selectUi.js" type='text/javascript'></script>
<script type="text/javascript" src="../../js/plugins/laydate/laydate.js"></script>
<script src="../../js/plugins/layer/layer.js"></script>
<script src="../../js/plugins/queryCity/js/public.js" type="text/javascript"></script>
<script src="../../js/selectUi.js" type='text/javascript'></script>
<script src="../../js/deco-common.js" type='text/javascript'></script>
<script type="text/javascript" src="../../js/plugins/laydate/laydate.js"></script>
<script src="../../js/plugins/layer/layer.js"></script>
<script src="../../js/plugins/queryCity/js/public.js" type="text/javascript"></script>
<script src="../../js/unslider.js" type="text/javascript"></script>
<script src="../../js/plugins/jquery.scrollLoading.js"  type="text/javascript"></script>
<script src="../../js/deco-common.js"  type="text/javascript"></script>

<script type="text/javascript" src="../../js/index.js"></script>
<script type="text/javascript" src="../../js/plugins/jquery.raty.js"></script>



</body>
</html>
